<!DOCTYPE html>
<html>

<meta charset='utf-8'>

<head></head>
<script src="js/avalon.min.js"></script>

<body>

    <div ms-controller="test">
        <ul ms-each="packbag">
            <li>
                {{el.title}}
                <br/> 数量：
                <input ms-duplex="el.amount">
                <br/> 单价：
                <input ms-duplex='el.price'>
                <br/> 总价： {{el.price * el.amount}}
            </li>
        </ul>


        所有商品总价 {{Total}} 元
        <button ms-on-click="btnTotal">计算总价</button>
    </div>




    <script>
        var vm = avalon.define({
            $id: "test",
            packbag: [{
                    title: "大力丸1",
                    amount: 10,
                    price: 100,
                    total: null
              }, {
                    title: "大力丸2",
                    amount: 10,
                    price: 200,
                    total: null
              },
                {
                    title: "大力丸3",
                    amount: 22,
                    price: 200,
                    total: null
              }],
            priceTotal: [], //产品总价列表
            Total: 0,
            btnTotal: function () {
                vm.priceTotal = [];
                vm.Total = 0;
                for (var i = 0; i <= vm.packbag.length - 1; i++) {

                    var t = vm.packbag[i].amount * vm.packbag[i].price;

                    vm.priceTotal.push(t);

                    console.log(vm.priceTotal);


                }

                vm.priceTotal.forEach(function (e) {

                    vm.Total += e

                })



            }

        })
    </script>
</body>

</html>
